<template>
  <div class="flow-process-node__delete" >
    <el-popover
      v-model="isShow"
      ref="popover"
      placement="top"
      trigger="manual"
      width="190">
      <span class="flow-process-node-msg"><i class="el-icon-question"></i> {{ $t('task.setting.taskTypeSetting.flow.delNode')}}</span>
      <div class="flow-process-node-del-btn">
        <el-button size="mini" type="text" class="cancel-btn">{{ $t('common.base.cancel') }}</el-button>
        <el-button class="flow-process-primary-button" type="primary" size="mini" @click="onDel">{{ $t('common.base.makeSure')}}</el-button>
      </div>
      <i class="iconfont icon-delete" slot="reference" @click.stop="togglePopover"></i>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'biz-flow-process-delete-node',
  props: {
    data: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    togglePopover(){
      this.isShow = !this.isShow;
      if (this.isShow) {
        document.addEventListener('click', this.handleDocumentClick, true);
      } else {
        document.removeEventListener('click', this.handleDocumentClick, true);
      }
    },
    handleDocumentClick(e) {
      if (!this.$refs.popover.$el.contains(e.target)) {
        this.isShow = false;
        document.removeEventListener('click', this.handleDocumentClick, true);
      }
    },
    onDel() {
      this.$emit('click')
    }
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleDocumentClick, true);
  }
}
</script>

<style lang="scss" scoped>
.flow-process-node__delete {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 20;
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0;
    bottom: -4px;
  }
  .icon-delete{
    font-size: 16px;
    color: #595959;
  }
  &.condition-del{
  .icon-delete{
      color: #595959;
    }
  }
}
.flow-process-node-msg {
    font-size: 13px;
    color: #262626;
    display: inline-block;
    margin-top: 2px;
    .el-icon-question {
      color:#E6A23C;
      font-size: 14px;
    }
  }
  .flow-process-node-del-btn {
    text-align: right;
    margin-top: 10px;
    .cancel-btn {
      color: #595959 !important;
      margin-right: 10px;
    }
    .flow-process-primary-button {
      border-radius: 2px;
    }
  }
  
</style>
